import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, DatePicker } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  deviceId?: any
}

const FormItem = Form.Item;
const ONE_PAGE_SIZE = 10;

@connect()
class Search extends Component<Props, any> {

  search = e => {
    e.preventDefault();
    const { dispatch, deviceId } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'unit_task_rules/updateTaskRuleTargetCond',
          payload: {
            pageNum: 1,
            taskRuleId: deviceId,
            targetTypeList: ['-1'],
            pageSize: ONE_PAGE_SIZE,
            ...values
          }
        });

        this.props.initCurrent()
      }
    });
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0}>
            <FormItem
              label="姓名"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ message: '输入姓名' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入姓名" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1}>
            <SearchButton htmlType="submit">搜索</SearchButton>
            <SearchButton onClick={(e) => {
              this.props.form.resetFields();
              this.search(e)
            }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create()(Search);
export default SearchS;
